<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function ajax(options){
            var defaults={

                type:'get',
                url:'',
                data:{},
                header:{
                'Content-Type':'application/x-www-form-urlencoded'
                },
                success:function(){},
                error:function(){}
            }
            // 使用options对象中的属性覆盖defaults对象中的属性
            Object.assign(defaults,options)
            // 创建ajax对象
            var xhr=new XMLHttpRequest();
            // 拼接请求参数的变量
            var params=''
            // console.log(defaults.data)
            for(var attr in defaults.data){
                // 将参数转换为字符串格式
                
                params+=attr+'='+defaults.data[attr]+'&'
            }
            // 将参数最后面的&截取掉
            // 截取完成后重新赋值给params
            params=params.substr(0,params.length-1)
            // 判断请求方式
            if(defaults.type=='get'){
                defaults.url=defaults.url+'?'+params
            }
              // 配置ajax对象
            xhr.open(defaults.type,defaults.url)
            if(defaults.type=='post'){
                var contenttype=defaults.header['Content-Type']
                xhr.setRequestHeader('Content-Type',contenttype)
                if(contenttype=='application/json'){
                    xhr.send(JSON.stringify(defaults.data))
                }else{
                    xhr.send(params)
                }
                
            }else{
                // 发送请求
                xhr.send()
            }
            // console.log(params)
          
            
            
            // 监听xhr对象onload
            // 当xhr对象接收完响应数据后触发
            xhr.onload=function(){
                // xhr.getResponseHeader()
                // 获取响应头中的数据
                var contenttype=xhr.getResponseHeader('Content-Type')
                var responseText=xhr.responseText
                if(contenttype.includes('application/json')){
                    responseText=JSON.parse(responseText)
                }
                if(xhr.status==200){
                    // 当http状态码为200时
                    // 请求成功
                    defaults.success(responseText,xhr)
                }
                else{
                    //  请求失败
                    defaults.error(responseText,xhr)
                }
            }
        }
        ajax({
            // 请求方式
            type:'post',
            // 请求地址
            url:'http://localhost:3000/responsedata',
            data:{
                name:'zhangsan',
                age:20
            },          
            success:function(data){
                console.log('这里是success函数')
                console.log(data)
            },            
        })
        /*
        请求参数考虑的问题
            1.请求参数的问题
                将请求参数传递到ajax函数内部，在函数内部根据请求
                方式的不同将请求参数放置在不同的位置

                get放在请求地址后面

                post放在send方法里面
            2.请求参数的格式
                application/x-www-form-urlencoded

                    参数名称=参数值&参数名称=参数值  

                    nanme=zhangsan&age=20 

                application/json

                    {name:'zhangsan',age:20}  
                    
                1.传递对象数据类型对于函数的调用者更加友好
                2.在函数内部对象数据类型转换为字符串数据类型更加方便    
        */ 
    </script>
</body>
</html>